<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Layout 布局 | Vue组件库</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/ant-vue/assets/logo.png">
    <link rel="stylesheet" href="/ant-vue/css/style.css">
    <meta name="description" content="">
    <link rel="preload" href="/ant-vue/assets/css/0.styles.2ba61d87.css" as="style"><link rel="preload" href="/ant-vue/assets/js/app.feae463b.js" as="script"><link rel="preload" href="/ant-vue/assets/js/2.3106f7d0.js" as="script"><link rel="preload" href="/ant-vue/assets/js/91.551abb3a.js" as="script"><link rel="preload" href="/ant-vue/assets/js/11.a6f7a3fd.js" as="script"><link rel="preload" href="/ant-vue/assets/js/12.691490ec.js" as="script"><link rel="preload" href="/ant-vue/assets/js/13.1932f397.js" as="script"><link rel="preload" href="/ant-vue/assets/js/10.fcb610d3.js" as="script"><link rel="prefetch" href="/ant-vue/assets/js/100.69b9b0f1.js"><link rel="prefetch" href="/ant-vue/assets/js/101.5e76b024.js"><link rel="prefetch" href="/ant-vue/assets/js/102.259a6d30.js"><link rel="prefetch" href="/ant-vue/assets/js/103.d7208653.js"><link rel="prefetch" href="/ant-vue/assets/js/104.48be3455.js"><link rel="prefetch" href="/ant-vue/assets/js/105.44de38d1.js"><link rel="prefetch" href="/ant-vue/assets/js/106.9485e296.js"><link rel="prefetch" href="/ant-vue/assets/js/107.65fb12ef.js"><link rel="prefetch" href="/ant-vue/assets/js/108.d8df1e9d.js"><link rel="prefetch" href="/ant-vue/assets/js/109.fc7068bb.js"><link rel="prefetch" href="/ant-vue/assets/js/110.02ef4b4c.js"><link rel="prefetch" href="/ant-vue/assets/js/111.4b6b4237.js"><link rel="prefetch" href="/ant-vue/assets/js/112.4ef1140e.js"><link rel="prefetch" href="/ant-vue/assets/js/113.f8e81e82.js"><link rel="prefetch" href="/ant-vue/assets/js/114.b1e8753a.js"><link rel="prefetch" href="/ant-vue/assets/js/115.b688a8a4.js"><link rel="prefetch" href="/ant-vue/assets/js/116.13b91127.js"><link rel="prefetch" href="/ant-vue/assets/js/117.81b94e0e.js"><link rel="prefetch" href="/ant-vue/assets/js/118.5ffc1982.js"><link rel="prefetch" href="/ant-vue/assets/js/119.f70ca514.js"><link rel="prefetch" href="/ant-vue/assets/js/14.106cfc57.js"><link rel="prefetch" href="/ant-vue/assets/js/15.4b37141e.js"><link rel="prefetch" href="/ant-vue/assets/js/16.91e0d7ac.js"><link rel="prefetch" href="/ant-vue/assets/js/17.09243d51.js"><link rel="prefetch" href="/ant-vue/assets/js/18.09653254.js"><link rel="prefetch" href="/ant-vue/assets/js/19.fde773b2.js"><link rel="prefetch" href="/ant-vue/assets/js/20.6ad25552.js"><link rel="prefetch" href="/ant-vue/assets/js/21.b505ad76.js"><link rel="prefetch" href="/ant-vue/assets/js/22.fac0194b.js"><link rel="prefetch" href="/ant-vue/assets/js/23.65990f54.js"><link rel="prefetch" href="/ant-vue/assets/js/24.1773f708.js"><link rel="prefetch" href="/ant-vue/assets/js/25.27e04dfb.js"><link rel="prefetch" href="/ant-vue/assets/js/26.51383914.js"><link rel="prefetch" href="/ant-vue/assets/js/27.62ebcdf1.js"><link rel="prefetch" href="/ant-vue/assets/js/28.13853669.js"><link rel="prefetch" href="/ant-vue/assets/js/29.8bcd90d9.js"><link rel="prefetch" href="/ant-vue/assets/js/3.1db89034.js"><link rel="prefetch" href="/ant-vue/assets/js/30.6f3d70d7.js"><link rel="prefetch" href="/ant-vue/assets/js/31.f1f893a9.js"><link rel="prefetch" href="/ant-vue/assets/js/32.6a57d8b6.js"><link rel="prefetch" href="/ant-vue/assets/js/33.69ad53b1.js"><link rel="prefetch" href="/ant-vue/assets/js/34.81487e18.js"><link rel="prefetch" href="/ant-vue/assets/js/35.8df52c9b.js"><link rel="prefetch" href="/ant-vue/assets/js/36.9ba45664.js"><link rel="prefetch" href="/ant-vue/assets/js/37.4cc172aa.js"><link rel="prefetch" href="/ant-vue/assets/js/38.99f4f913.js"><link rel="prefetch" href="/ant-vue/assets/js/39.a7766730.js"><link rel="prefetch" href="/ant-vue/assets/js/4.cb18bf47.js"><link rel="prefetch" href="/ant-vue/assets/js/40.1f91d644.js"><link rel="prefetch" href="/ant-vue/assets/js/41.bc3ed068.js"><link rel="prefetch" href="/ant-vue/assets/js/42.799b0238.js"><link rel="prefetch" href="/ant-vue/assets/js/43.3e09c1da.js"><link rel="prefetch" href="/ant-vue/assets/js/44.5f5e0fb0.js"><link rel="prefetch" href="/ant-vue/assets/js/45.19885da5.js"><link rel="prefetch" href="/ant-vue/assets/js/46.7367ff4a.js"><link rel="prefetch" href="/ant-vue/assets/js/47.153e7f66.js"><link rel="prefetch" href="/ant-vue/assets/js/48.e9ac1699.js"><link rel="prefetch" href="/ant-vue/assets/js/49.c43a910c.js"><link rel="prefetch" href="/ant-vue/assets/js/5.d99ae7ec.js"><link rel="prefetch" href="/ant-vue/assets/js/50.cb8d7803.js"><link rel="prefetch" href="/ant-vue/assets/js/51.c7b3f51d.js"><link rel="prefetch" href="/ant-vue/assets/js/52.f2ebf396.js"><link rel="prefetch" href="/ant-vue/assets/js/53.778a71c1.js"><link rel="prefetch" href="/ant-vue/assets/js/54.a5951c5b.js"><link rel="prefetch" href="/ant-vue/assets/js/55.8a2d980f.js"><link rel="prefetch" href="/ant-vue/assets/js/56.e595b056.js"><link rel="prefetch" href="/ant-vue/assets/js/57.d34c6203.js"><link rel="prefetch" href="/ant-vue/assets/js/58.f06d0229.js"><link rel="prefetch" href="/ant-vue/assets/js/59.663f85a9.js"><link rel="prefetch" href="/ant-vue/assets/js/6.83a838f3.js"><link rel="prefetch" href="/ant-vue/assets/js/60.cbdfc110.js"><link rel="prefetch" href="/ant-vue/assets/js/61.b62a94e3.js"><link rel="prefetch" href="/ant-vue/assets/js/62.a0624911.js"><link rel="prefetch" href="/ant-vue/assets/js/63.62cdd7d2.js"><link rel="prefetch" href="/ant-vue/assets/js/64.b03a0487.js"><link rel="prefetch" href="/ant-vue/assets/js/65.45601906.js"><link rel="prefetch" href="/ant-vue/assets/js/66.cd15b533.js"><link rel="prefetch" href="/ant-vue/assets/js/67.d3a0135c.js"><link rel="prefetch" href="/ant-vue/assets/js/68.5ac6c634.js"><link rel="prefetch" href="/ant-vue/assets/js/69.5dafe1b0.js"><link rel="prefetch" href="/ant-vue/assets/js/7.43e4a78c.js"><link rel="prefetch" href="/ant-vue/assets/js/70.5e8ebc5c.js"><link rel="prefetch" href="/ant-vue/assets/js/71.d8fe1559.js"><link rel="prefetch" href="/ant-vue/assets/js/72.9e21be74.js"><link rel="prefetch" href="/ant-vue/assets/js/73.beb41172.js"><link rel="prefetch" href="/ant-vue/assets/js/74.623b7e4f.js"><link rel="prefetch" href="/ant-vue/assets/js/75.e75f2c31.js"><link rel="prefetch" href="/ant-vue/assets/js/76.f731394c.js"><link rel="prefetch" href="/ant-vue/assets/js/77.b4328ac9.js"><link rel="prefetch" href="/ant-vue/assets/js/78.a803a552.js"><link rel="prefetch" href="/ant-vue/assets/js/79.a7b30303.js"><link rel="prefetch" href="/ant-vue/assets/js/8.4fadf24d.js"><link rel="prefetch" href="/ant-vue/assets/js/80.6fb19496.js"><link rel="prefetch" href="/ant-vue/assets/js/81.6b9575bc.js"><link rel="prefetch" href="/ant-vue/assets/js/82.deaa7900.js"><link rel="prefetch" href="/ant-vue/assets/js/83.1bf56d0c.js"><link rel="prefetch" href="/ant-vue/assets/js/84.e3d8d068.js"><link rel="prefetch" href="/ant-vue/assets/js/85.87ea3241.js"><link rel="prefetch" href="/ant-vue/assets/js/86.1d33971e.js"><link rel="prefetch" href="/ant-vue/assets/js/87.f30c05af.js"><link rel="prefetch" href="/ant-vue/assets/js/88.489a518f.js"><link rel="prefetch" href="/ant-vue/assets/js/89.a88fc402.js"><link rel="prefetch" href="/ant-vue/assets/js/9.deb4987b.js"><link rel="prefetch" href="/ant-vue/assets/js/90.e4be9b87.js"><link rel="prefetch" href="/ant-vue/assets/js/92.8bd44307.js"><link rel="prefetch" href="/ant-vue/assets/js/93.4e1e11ae.js"><link rel="prefetch" href="/ant-vue/assets/js/94.104c633e.js"><link rel="prefetch" href="/ant-vue/assets/js/95.16b86086.js"><link rel="prefetch" href="/ant-vue/assets/js/96.e27b45e8.js"><link rel="prefetch" href="/ant-vue/assets/js/97.43600059.js"><link rel="prefetch" href="/ant-vue/assets/js/98.99220f0e.js"><link rel="prefetch" href="/ant-vue/assets/js/99.72fd0ecb.js">
    <link rel="stylesheet" href="/ant-vue/assets/css/0.styles.2ba61d87.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/ant-vue/" class="router-link-active no-logo home-link"><!----> <span class="site-name">Vue组件库</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/ant-vue/" class="router-link-active">
          主页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/ant-vue/category/" class="router-link-active">
          组件
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/ant-vue/category/" aria-current="page" title="Grid 栅格布局" class="sidebar-link">Grid 栅格布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/#展示效果" title="展示效果" class="sidebar-link">展示效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/#grid-使用-flex-的方式布局" title="Grid 使用 Flex 的方式布局" class="sidebar-link">Grid 使用 Flex 的方式布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-1.html" aria-current="page" title="Layout 布局" class="active sidebar-link">Layout 布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#典型页面布局" title="典型页面布局" class="sidebar-link">典型页面布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#应用型网站布局" title="应用型网站布局" class="sidebar-link">应用型网站布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#展示类网站布局" title="展示类网站布局" class="sidebar-link">展示类网站布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#固定侧边栏布局" title="固定侧边栏布局" class="sidebar-link">固定侧边栏布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#layout" title="Layout" class="sidebar-link">Layout</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#layout-sider" title="Layout.Sider" class="sidebar-link">Layout.Sider</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-2.html" title="Button 按钮" class="sidebar-link">Button 按钮</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#通用按钮" title="通用按钮" class="sidebar-link">通用按钮</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#带图标的按钮" title="带图标的按钮" class="sidebar-link">带图标的按钮</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#按钮的其他形式" title="按钮的其他形式" class="sidebar-link">按钮的其他形式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-3.html" title="Icon 图标" class="sidebar-link">Icon 图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#方向性图标" title="方向性图标" class="sidebar-link">方向性图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#提示建议性图标" title="提示建议性图标" class="sidebar-link">提示建议性图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#编辑类图标" title="编辑类图标" class="sidebar-link">编辑类图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#数据类图标" title="数据类图标" class="sidebar-link">数据类图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#品牌和标识" title="品牌和标识" class="sidebar-link">品牌和标识</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#网站通用图标" title="网站通用图标" class="sidebar-link">网站通用图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-4.html" title="Pagination 分页组件" class="sidebar-link">Pagination 分页组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#简洁的分页" title="简洁的分页" class="sidebar-link">简洁的分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#普通的分页" title="普通的分页" class="sidebar-link">普通的分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#更多分页样式" title="更多分页样式" class="sidebar-link">更多分页样式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#设置分页按钮底色以及按钮文字" title="设置分页按钮底色以及按钮文字" class="sidebar-link">设置分页按钮底色以及按钮文字</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-5.html" title="AutoComplete 自动搜索栏" class="sidebar-link">AutoComplete 自动搜索栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#输入省份信息" title="输入省份信息" class="sidebar-link">输入省份信息</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#自动补充邮箱后缀" title="自动补充邮箱后缀" class="sidebar-link">自动补充邮箱后缀</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#搜索框自动完成" title="搜索框自动完成" class="sidebar-link">搜索框自动完成</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-6.html" title="Menu 导航菜单" class="sidebar-link">Menu 导航菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#顶部导航菜单" title="顶部导航菜单" class="sidebar-link">顶部导航菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#侧边导航菜单" title="侧边导航菜单" class="sidebar-link">侧边导航菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#子菜单是弹出的形式。" title="子菜单是弹出的形式。" class="sidebar-link">子菜单是弹出的形式。</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-7.html" title="Steps 步骤条" class="sidebar-link">Steps 步骤条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#简单的步骤条" title="简单的步骤条" class="sidebar-link">简单的步骤条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#带有步骤说明的信息" title="带有步骤说明的信息" class="sidebar-link">带有步骤说明的信息</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#设置图标" title="设置图标" class="sidebar-link">设置图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#通过按钮控制流程显示" title="通过按钮控制流程显示" class="sidebar-link">通过按钮控制流程显示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#竖直方向的步骤条" title="竖直方向的步骤条" class="sidebar-link">竖直方向的步骤条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#包含步骤点的进度条" title="包含步骤点的进度条" class="sidebar-link">包含步骤点的进度条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-8.html" title="FormModel 表单" class="sidebar-link">FormModel 表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#简单的表单" title="简单的表单" class="sidebar-link">简单的表单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#带表单验证功能" title="带表单验证功能" class="sidebar-link">带表单验证功能</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#简单的登录框表单" title="简单的登录框表单" class="sidebar-link">简单的登录框表单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#带有验证功能的登录框表单" title="带有验证功能的登录框表单" class="sidebar-link">带有验证功能的登录框表单</a></li></ul></li><li><a href="/ant-vue/category/article-9.html" title="Dropdown 下拉菜单" class="sidebar-link">Dropdown 下拉菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#简单的下拉菜单" title="简单的下拉菜单" class="sidebar-link">简单的下拉菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#多层级下拉菜单" title="多层级下拉菜单" class="sidebar-link">多层级下拉菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#菜单的弹出方向" title="菜单的弹出方向" class="sidebar-link">菜单的弹出方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#下拉菜单的触发方式" title="下拉菜单的触发方式" class="sidebar-link">下拉菜单的触发方式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#右键菜单" title="右键菜单" class="sidebar-link">右键菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-10.html" title="Checkbox 多选框" class="sidebar-link">Checkbox 多选框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#用数组生成checkbox" title="用数组生成CheckBox" class="sidebar-link">用数组生成CheckBox</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#搭配布局组件" title="搭配布局组件" class="sidebar-link">搭配布局组件</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-11.html" title="Radio 单选框" class="sidebar-link">Radio 单选框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#radiogroup-事件" title="RadioGroup 事件" class="sidebar-link">RadioGroup 事件</a></li></ul></li><li><a href="/ant-vue/category/article-12.html" title="Select 选择框" class="sidebar-link">Select 选择框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#简单的选择框" title="简单的选择框" class="sidebar-link">简单的选择框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#标签" title="标签" class="sidebar-link">标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#获得选项的文本" title="获得选项的文本" class="sidebar-link">获得选项的文本</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#选择框联动" title="选择框联动" class="sidebar-link">选择框联动</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#多选" title="多选" class="sidebar-link">多选</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#带搜索框" title="带搜索框" class="sidebar-link">带搜索框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-13.html" title="Slider 滑动输入条" class="sidebar-link">Slider 滑动输入条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#基本" title="基本" class="sidebar-link">基本</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#带输入框的滑块" title="带输入框的滑块" class="sidebar-link">带输入框的滑块</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#带标签的滑块" title="带标签的滑块" class="sidebar-link">带标签的滑块</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#垂直方向的-slider" title="垂直方向的 Slider" class="sidebar-link">垂直方向的 Slider</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#控制-tooltip-的显示" title="控制 ToolTip 的显示" class="sidebar-link">控制 ToolTip 的显示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-14.html" title="InputNumber 数字输入框" class="sidebar-link">InputNumber 数字输入框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#小数" title="小数" class="sidebar-link">小数</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#格式化展示" title="格式化展示" class="sidebar-link">格式化展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-15.html" title="Rate 评分" class="sidebar-link">Rate 评分</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#文案展现" title="文案展现" class="sidebar-link">文案展现</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#半星" title="半星" class="sidebar-link">半星</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#只读" title="只读" class="sidebar-link">只读</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#其他字符" title="其他字符" class="sidebar-link">其他字符</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-16.html" title="Carousel 走马灯 / 轮播图" class="sidebar-link">Carousel 走马灯 / 轮播图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#基本用法" title="基本用法" class="sidebar-link">基本用法</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#设置方向" title="设置方向" class="sidebar-link">设置方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#渐显" title="渐显" class="sidebar-link">渐显</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自动定时切换" title="自动定时切换" class="sidebar-link">自动定时切换</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自定义分页" title="自定义分页" class="sidebar-link">自定义分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自定义箭头" title="自定义箭头" class="sidebar-link">自定义箭头</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-17.html" title="Alert 警告提示" class="sidebar-link">Alert 警告提示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#含有辅助性文字介绍" title="含有辅助性文字介绍" class="sidebar-link">含有辅助性文字介绍</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#可关闭的警告提示" title="可关闭的警告提示" class="sidebar-link">可关闭的警告提示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#图标" title="图标" class="sidebar-link">图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-18.html" title="Message 全局提示" class="sidebar-link">Message 全局提示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-18.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-19.html" title="Modal 对话框" class="sidebar-link">Modal 对话框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#确认对话框" title="确认对话框" class="sidebar-link">确认对话框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#信息提示" title="信息提示" class="sidebar-link">信息提示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#定时关闭" title="定时关闭" class="sidebar-link">定时关闭</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-20.html" title="Notification 通知提醒框" class="sidebar-link">Notification 通知提醒框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#带有图标的通知提醒框" title="带有图标的通知提醒框" class="sidebar-link">带有图标的通知提醒框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-21.html" title="Popconfirm 气泡确认框" class="sidebar-link">Popconfirm 气泡确认框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#位置" title="位置" class="sidebar-link">位置</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-22.html" title="Result 结果" class="sidebar-link">Result 结果</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#成功的结果" title="成功的结果" class="sidebar-link">成功的结果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#展示普通的信息处理结果" title="展示普通的信息处理结果" class="sidebar-link">展示普通的信息处理结果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#警告类型" title="警告类型" class="sidebar-link">警告类型</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#错误反馈" title="错误反馈" class="sidebar-link">错误反馈</a></li></ul></li><li><a href="/ant-vue/category/article-23.html" title="Progress 进度条" class="sidebar-link">Progress 进度条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度条" title="进度条" class="sidebar-link">进度条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度条动态展示" title="进度条动态展示" class="sidebar-link">进度条动态展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度圈" title="进度圈" class="sidebar-link">进度圈</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度圈动态展示" title="进度圈动态展示" class="sidebar-link">进度圈动态展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-24.html" title="Skeleton 骨架图 / 加载占位图" class="sidebar-link">Skeleton 骨架图 / 加载占位图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#最简单的占位效果" title="最简单的占位效果" class="sidebar-link">最简单的占位效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#带图标的占位效果" title="带图标的占位效果" class="sidebar-link">带图标的占位效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#显示动画效果" title="显示动画效果" class="sidebar-link">显示动画效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-25.html" title="Collapse 折叠面板" class="sidebar-link">Collapse 折叠面板</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#普通的折叠面板" title="普通的折叠面板" class="sidebar-link">普通的折叠面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#每次只能打开一个标签页" title="每次只能打开一个标签页" class="sidebar-link">每次只能打开一个标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#嵌套折叠面板" title="嵌套折叠面板" class="sidebar-link">嵌套折叠面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#自定义面板" title="自定义面板" class="sidebar-link">自定义面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-26.html" title="TabCar 选项卡" class="sidebar-link">TabCar 选项卡</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#基本用法" title="基本用法" class="sidebar-link">基本用法</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#带图标的标签页" title="带图标的标签页" class="sidebar-link">带图标的标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#标签列表的方向" title="标签列表的方向" class="sidebar-link">标签列表的方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#卡片式" title="卡片式" class="sidebar-link">卡片式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#新增和关闭标签页" title="新增和关闭标签页" class="sidebar-link">新增和关闭标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-27.html" title="Tag 标签" class="sidebar-link">Tag 标签</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#多彩标签" title="多彩标签" class="sidebar-link">多彩标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#可选择的标签" title="可选择的标签" class="sidebar-link">可选择的标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#动态添加和删除" title="动态添加和删除" class="sidebar-link">动态添加和删除</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-28.html" title="Timeline 时间轴" class="sidebar-link">Timeline 时间轴</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#基本的时间轴" title="基本的时间轴" class="sidebar-link">基本的时间轴</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#圆圈颜色" title="圆圈颜色" class="sidebar-link">圆圈颜色</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#自定义时间轴点" title="自定义时间轴点" class="sidebar-link">自定义时间轴点</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#交替展现" title="交替展现" class="sidebar-link">交替展现</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#timeline-item" title="Timeline.Item" class="sidebar-link">Timeline.Item</a></li></ul></li><li><a href="/ant-vue/category/article-29.html" title="Tooltip 文字提示气泡框" class="sidebar-link">Tooltip 文字提示气泡框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#共同的-api" title="共同的 API" class="sidebar-link">共同的 API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-30.html" title="Statistic 统计数值" class="sidebar-link">Statistic 统计数值</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#简单展示" title="简单展示" class="sidebar-link">简单展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#通过前缀和后缀添加单位" title="通过前缀和后缀添加单位" class="sidebar-link">通过前缀和后缀添加单位</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#倒计时组件" title="倒计时组件" class="sidebar-link">倒计时组件</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic" title="Statistic" class="sidebar-link">Statistic</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic-countdown" title="Statistic.Countdown" class="sidebar-link">Statistic.Countdown</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic-countdown-事件" title="Statistic.Countdown 事件" class="sidebar-link">Statistic.Countdown 事件</a></li></ul></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="layout-布局"><a href="#layout-布局" class="header-anchor">#</a> Layout 布局</h1> <h2 id="典型页面布局"><a href="#典型页面布局" class="header-anchor">#</a> 典型页面布局</h2> <br> <div id="components-layout-demo-basic"><section class="ant-layout"><header class="ant-layout-header">导航栏</header> <main class="ant-layout-content">内容区域</main> <footer class="ant-layout-footer">底部</footer></section> <section class="ant-layout"><header class="ant-layout-header">导航栏</header> <section class="ant-layout"><aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;"><div class="ant-layout-sider-children">侧边栏</div></aside> <main class="ant-layout-content">内容区域</main></section> <footer class="ant-layout-footer">底部</footer></section> <section class="ant-layout"><header class="ant-layout-header">导航栏</header> <section class="ant-layout"><main class="ant-layout-content">内容区域</main> <aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;"><div class="ant-layout-sider-children">侧边栏</div></aside></section> <footer class="ant-layout-footer">底部</footer></section> <section class="ant-layout"><aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;"><div class="ant-layout-sider-children">侧边栏</div></aside> <section class="ant-layout"><header class="ant-layout-header">导航栏</header> <main class="ant-layout-content">内容区域</main> <footer class="ant-layout-footer">底部</footer></section></section></div> <details class="custom-block details"><summary>查看代码</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;components-layout-demo-basic&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>导航栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>内容区域<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>底部<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>导航栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>侧边栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>内容区域<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>底部<span class="token operator">&lt;&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>导航栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>内容区域<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>侧边栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>底部<span class="token operator">&lt;&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>侧边栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>导航栏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>内容区域<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>底部<span class="token operator">&lt;&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">{</span>
  text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token punctuation">,</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">-</span>footer <span class="token punctuation">{</span>
  background<span class="token operator">:</span> #<span class="token number">7</span>dbcea<span class="token punctuation">;</span>
  color<span class="token operator">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">-</span>footer <span class="token punctuation">{</span>
  line<span class="token operator">-</span>height<span class="token operator">:</span> <span class="token number">1.5</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">-</span>sider <span class="token punctuation">{</span>
  background<span class="token operator">:</span> #<span class="token number">3</span>ba0e9<span class="token punctuation">;</span>
  color<span class="token operator">:</span> #fff<span class="token punctuation">;</span>
  line<span class="token operator">-</span>height<span class="token operator">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">-</span>content <span class="token punctuation">{</span>
  background<span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">142</span><span class="token punctuation">,</span> <span class="token number">233</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  color<span class="token operator">:</span> #fff<span class="token punctuation">;</span>
  min<span class="token operator">-</span>height<span class="token operator">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
  line<span class="token operator">-</span>height<span class="token operator">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token operator">&gt;</span> <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout <span class="token punctuation">{</span>
  margin<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">48</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>basic <span class="token operator">&gt;</span> <span class="token punctuation">.</span>ant<span class="token operator">-</span>layout<span class="token operator">:</span>last<span class="token operator">-</span>child <span class="token punctuation">{</span>
  margin<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</code></pre></div></details> <h2 id="应用型网站布局"><a href="#应用型网站布局" class="header-anchor">#</a> 应用型网站布局</h2> <br> <section id="components-layout-demo-top-side-2" class="ant-layout"><header class="header ant-layout-header"><div class="logo"></div> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height:64px;"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item">
        菜单 1
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected">
        菜单 2
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item">
        菜单 3
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></header> <section class="ant-layout"><aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;background:#fff;"><div class="ant-layout-sider-children"><ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height:100%;border-right:0;"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"><div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>分类 1</span><i class="ant-menu-submenu-arrow"></i></div><ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub"><li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left:48px;">
            项目1
          </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
            项目2
          </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
            项目3
          </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
            项目4
          </li></ul></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"><div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: laptop" class="anticon anticon-laptop"><svg viewBox="64 64 896 896" focusable="false" data-icon="laptop" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"></path></svg></i>分类 2</span><i class="ant-menu-submenu-arrow"></i></div><div></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"><div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i>分类 3</span><i class="ant-menu-submenu-arrow"></i></div><div></div></li></ul></div></aside> <section class="ant-layout" style="padding:0 24px 24px;"><div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">主页</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">列表</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">应用</span><span class="ant-breadcrumb-separator">/</span></span></div> <main class="ant-layout-content" style="background:#fff;padding:24px;margin:0;min-height:280px;">
        内容
      </main></section></section></section> <details class="custom-block details"><summary>查看代码</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout id<span class="token operator">=</span><span class="token string">&quot;components-layout-demo-top-side-2&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;header&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;logo&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu
        theme<span class="token operator">=</span><span class="token string">&quot;dark&quot;</span>
        mode<span class="token operator">=</span><span class="token string">&quot;horizontal&quot;</span>
        <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>selected<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['2']&quot;</span>
        <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ lineHeight: '64px' }&quot;</span>
      <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">1</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">2</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">3</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider width<span class="token operator">=</span><span class="token string">&quot;200&quot;</span> style<span class="token operator">=</span><span class="token string">&quot;background: #fff&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu
          mode<span class="token operator">=</span><span class="token string">&quot;inline&quot;</span>
          <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>selected<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['1']&quot;</span>
          <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>open<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['sub1']&quot;</span>
          <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ height: '100%', borderRight: 0 }&quot;</span>
        <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub1&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;user&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
              option1
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
              option2
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
              option3
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;4&quot;</span><span class="token operator">&gt;</span>
              option4
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub2&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;laptop&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;5&quot;</span><span class="token operator">&gt;</span>
              option5
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;6&quot;</span><span class="token operator">&gt;</span>
              option6
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;7&quot;</span><span class="token operator">&gt;</span>
              option7
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;8&quot;</span><span class="token operator">&gt;</span>
              option8
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub3&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;notification&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;9&quot;</span><span class="token operator">&gt;</span>
              option9
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;10&quot;</span><span class="token operator">&gt;</span>
              option10
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;11&quot;</span><span class="token operator">&gt;</span>
              option11
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;12&quot;</span><span class="token operator">&gt;</span>
              option12
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout style<span class="token operator">=</span><span class="token string">&quot;padding: 0 24px 24px&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb style<span class="token operator">=</span><span class="token string">&quot;margin: 16px 0&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>List<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>App<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content
          <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }&quot;</span>
        <span class="token operator">&gt;</span>
          Content
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      collapsed<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>top<span class="token operator">-</span>side<span class="token operator">-</span><span class="token number">2</span> <span class="token punctuation">.</span>logo <span class="token punctuation">{</span>
  width<span class="token operator">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
  height<span class="token operator">:</span> <span class="token number">31</span>px<span class="token punctuation">;</span>
  background<span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  margin<span class="token operator">:</span> <span class="token number">16</span>px <span class="token number">28</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
  float<span class="token operator">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</code></pre></div></details> <h2 id="展示类网站布局"><a href="#展示类网站布局" class="header-anchor">#</a> 展示类网站布局</h2> <br> <section id="components-layout-demo-top-side" class="ant-layout"><header class="header ant-layout-header"><div class="logo"></div> <ul role="menu" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-dark" style="line-height:64px;"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item">
        菜单 1
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected">
        菜单 2
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item">
        菜单 3
      </li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></header> <main class="ant-layout-content" style="padding:0 50px;"><div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">主页</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">列表</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">应用</span><span class="ant-breadcrumb-separator">/</span></span></div> <section class="ant-layout" style="padding:24px 0;background:#fff;"><aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;background:#fff;"><div class="ant-layout-sider-children"><ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height:100%;"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"><div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>分类 1</span><i class="ant-menu-submenu-arrow"></i></div><ul role="menu" class="ant-menu ant-menu-inline  ant-menu-sub"><li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left:48px;">
              项目1
            </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
              项目2
            </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
              项目3
            </li><li role="menuitem" class="ant-menu-item" style="padding-left:48px;">
              项目4
            </li></ul></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"><div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: laptop" class="anticon anticon-laptop"><svg viewBox="64 64 896 896" focusable="false" data-icon="laptop" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"></path></svg></i>分类 2</span><i class="ant-menu-submenu-arrow"></i></div><div></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline"><div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i aria-label="icon: notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i>分类 3</span><i class="ant-menu-submenu-arrow"></i></div><div></div></li></ul></div></aside> <main class="ant-layout-content" style="padding:0 24px;min-height:280px;">
        内容
      </main></section></main> <footer class="ant-layout-footer" style="text-align:center;">
    ©2018 xxx
  </footer></section> <details class="custom-block details"><summary>查看代码</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout id<span class="token operator">=</span><span class="token string">&quot;components-layout-demo-top-side&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;header&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;logo&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu
        theme<span class="token operator">=</span><span class="token string">&quot;dark&quot;</span>
        mode<span class="token operator">=</span><span class="token string">&quot;horizontal&quot;</span>
        <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>selected<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['2']&quot;</span>
        <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ lineHeight: '64px' }&quot;</span>
      <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">1</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">2</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
          nav <span class="token number">3</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content style<span class="token operator">=</span><span class="token string">&quot;padding: 0 50px&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb style<span class="token operator">=</span><span class="token string">&quot;margin: 16px 0&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>List<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>App<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">-</span>item<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>breadcrumb<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout style<span class="token operator">=</span><span class="token string">&quot;padding: 24px 0; background: #fff&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider width<span class="token operator">=</span><span class="token string">&quot;200&quot;</span> style<span class="token operator">=</span><span class="token string">&quot;background: #fff&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu
            mode<span class="token operator">=</span><span class="token string">&quot;inline&quot;</span>
            <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>selected<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['1']&quot;</span>
            <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>open<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['sub1']&quot;</span>
            style<span class="token operator">=</span><span class="token string">&quot;height: 100%&quot;</span>
          <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub1&quot;</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;user&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
                option1
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
                option2
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
                option3
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;4&quot;</span><span class="token operator">&gt;</span>
                option4
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub2&quot;</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;laptop&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;5&quot;</span><span class="token operator">&gt;</span>
                option5
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;6&quot;</span><span class="token operator">&gt;</span>
                option6
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;7&quot;</span><span class="token operator">&gt;</span>
                option7
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;8&quot;</span><span class="token operator">&gt;</span>
                option8
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu key<span class="token operator">=</span><span class="token string">&quot;sub3&quot;</span><span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>span slot<span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;notification&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>subnav <span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;9&quot;</span><span class="token operator">&gt;</span>
                option9
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;10&quot;</span><span class="token operator">&gt;</span>
                option10
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;11&quot;</span><span class="token operator">&gt;</span>
                option11
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;12&quot;</span><span class="token operator">&gt;</span>
                option12
              <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>sub<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ padding: '0 24px', minHeight: '280px' }&quot;</span><span class="token operator">&gt;</span>
          Content
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer style<span class="token operator">=</span><span class="token string">&quot;text-align: center&quot;</span><span class="token operator">&gt;</span>
      Ant Design ©<span class="token number">2018</span> Created by Ant <span class="token constant">UED</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>top<span class="token operator">-</span>side <span class="token punctuation">.</span>logo <span class="token punctuation">{</span>
  width<span class="token operator">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
  height<span class="token operator">:</span> <span class="token number">31</span>px<span class="token punctuation">;</span>
  background<span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  margin<span class="token operator">:</span> <span class="token number">16</span>px <span class="token number">28</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
  float<span class="token operator">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre></div></details> <h2 id="固定侧边栏布局"><a href="#固定侧边栏布局" class="header-anchor">#</a> 固定侧边栏布局</h2> <br> <section id="components-layout-demo-fixed-sider" class="ant-layout" style="height:450px;"><aside class="ant-layout-sider ant-layout-sider-dark" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;"><div class="ant-layout-sider-children"><div class="logo" style="border-radius:25px;"></div> <ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark"><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i> <span class="nav-text">导航 1</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: video-camera" class="anticon anticon-video-camera"><svg viewBox="64 64 896 896" focusable="false" data-icon="video-camera" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 302.3L784 376V224c0-35.3-28.7-64-64-64H128c-35.3 0-64 28.7-64 64v576c0 35.3 28.7 64 64 64h592c35.3 0 64-28.7 64-64V648l128 73.7c21.3 12.3 48-3.1 48-27.6V330c0-24.6-26.7-40-48-27.7zM712 792H136V232h576v560zm176-167l-104-59.8V458.9L888 399v226zM208 360h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H208c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"></path></svg></i> <span class="nav-text">导航 2</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: upload" class="anticon anticon-upload"><svg viewBox="64 64 896 896" focusable="false" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></i> <span class="nav-text">导航 3</span></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;"><i aria-label="icon: bar-chart" class="anticon anticon-bar-chart"><svg viewBox="64 64 896 896" focusable="false" data-icon="bar-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-600-80h56c4.4 0 8-3.6 8-8V560c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V384c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v320c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V462c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v242c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V304c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v400c0 4.4 3.6 8 8 8z"></path></svg></i> <span class="nav-text">导航 4</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: cloud-o" class="anticon anticon-cloud-o"><svg viewBox="64 64 896 896" focusable="false" data-icon="cloud" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 0 1-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"></path></svg></i> <span class="nav-text">导航 5</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: appstore-o" class="anticon anticon-appstore-o"><svg viewBox="64 64 896 896" focusable="false" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i> <span class="nav-text">导航 6</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: team" class="anticon anticon-team"><svg viewBox="64 64 896 896" focusable="false" data-icon="team" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M824.2 699.9a301.55 301.55 0 0 0-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 0 0-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 0 0 8 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 0 1 612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 0 0 8-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 0 1-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 0 1 612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 0 1-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 0 0 8 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"></path></svg></i> <span class="nav-text">导航 7</span></li><li role="menuitem" class="ant-menu-item" style="padding-left:24px;"><i aria-label="icon: shop" class="anticon anticon-shop"><svg viewBox="64 64 896 896" focusable="false" data-icon="shop" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M882 272.1V144c0-17.7-14.3-32-32-32H174c-17.7 0-32 14.3-32 32v128.1c-16.7 1-30 14.9-30 31.9v131.7a177 177 0 0 0 14.4 70.4c4.3 10.2 9.6 19.8 15.6 28.9v345c0 17.6 14.3 32 32 32h676c17.7 0 32-14.3 32-32V535a175 175 0 0 0 15.6-28.9c9.5-22.3 14.4-46 14.4-70.4V304c0-17-13.3-30.9-30-31.9zM214 184h596v88H214v-88zm362 656.1H448V736h128v104.1zm234 0H640V704c0-17.7-14.3-32-32-32H416c-17.7 0-32 14.3-32 32v136.1H214V597.9c2.9 1.4 5.9 2.8 9 4 22.3 9.4 46 14.1 70.4 14.1s48-4.7 70.4-14.1c13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 13.8-5.8 26.8-13.2 38.7-22.1.2-.1.4-.1.6 0a180.4 180.4 0 0 0 38.7 22.1c22.3 9.4 46 14.1 70.4 14.1 24.4 0 48-4.7 70.4-14.1 3-1.3 6-2.6 9-4v242.2zm30-404.4c0 59.8-49 108.3-109.3 108.3-40.8 0-76.4-22.1-95.2-54.9-2.9-5-8.1-8.1-13.9-8.1h-.6c-5.7 0-11 3.1-13.9 8.1A109.24 109.24 0 0 1 512 544c-40.7 0-76.2-22-95-54.7-3-5.1-8.4-8.3-14.3-8.3s-11.4 3.2-14.3 8.3a109.63 109.63 0 0 1-95.1 54.7C233 544 184 495.5 184 435.7v-91.2c0-.3.2-.5.5-.5h655c.3 0 .5.2.5.5v91.2z"></path></svg></i> <span class="nav-text">导航 8</span></li></ul></div></aside> <section class="ant-layout"><header class="ant-layout-header" style="padding:0;background:#96d8ba;"></header> <main class="ant-layout-content" style="margin:24px 16px 0;min-height:auto;"><div style="padding:24px;background:#fff;text-align:center;">
        1<br>2<br>3<br>4<br>5<br>6
        <br>7<br>8<br>9<br>10<br>11
        <br>12<br>13<br>14<br>15<br>16
        <br>17<br>18<br>19<br>20<br>21
        <br>22<br>23<br>24<br>25<br>26
        <br>27<br>28<br>29<br>30<br>31
      </div></main> <footer class="ant-layout-footer" style="text-align:center;">
      Copylight ©2020  by xxxx
    </footer></section></section> <details class="custom-block details"><summary>查看详情</summary> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout id<span class="token operator">=</span><span class="token string">&quot;components-layout-demo-fixed-sider&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;logo&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu theme<span class="token operator">=</span><span class="token string">&quot;dark&quot;</span> mode<span class="token operator">=</span><span class="token string">&quot;inline&quot;</span> <span class="token operator">:</span><span class="token keyword">default</span><span class="token operator">-</span>selected<span class="token operator">-</span>keys<span class="token operator">=</span><span class="token string">&quot;['4']&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;user&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;video-camera&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;upload&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;4&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;bar-chart&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">4</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;5&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;cloud-o&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;6&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;appstore-o&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">6</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;7&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;team&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">7</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item key<span class="token operator">=</span><span class="token string">&quot;8&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>a<span class="token operator">-</span>icon type<span class="token operator">=</span><span class="token string">&quot;shop&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>span <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav-text&quot;</span><span class="token operator">&gt;</span>nav <span class="token number">8</span><span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">-</span>item<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>menu<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>sider<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ marginLeft: '200px' }&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>header <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ background: '#fff', padding: 0 }&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ margin: '24px 16px 0', overflow: 'initial' }&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ padding: '24px', background: '#fff', textAlign: 'center' }&quot;</span><span class="token operator">&gt;</span>
          <span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
          Really
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
          long
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span>
          <span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span>br <span class="token operator">/</span><span class="token operator">&gt;</span>
          content
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>content<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer <span class="token operator">:</span>style<span class="token operator">=</span><span class="token string">&quot;{ textAlign: 'center' }&quot;</span><span class="token operator">&gt;</span>
        Copylight ©<span class="token number">2020</span>  by xxxx
      <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">-</span>footer<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
#components<span class="token operator">-</span>layout<span class="token operator">-</span>demo<span class="token operator">-</span>fixed<span class="token operator">-</span>sider <span class="token punctuation">.</span>logo <span class="token punctuation">{</span>
  height<span class="token operator">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
  background<span class="token operator">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  margin<span class="token operator">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>

</code></pre></div></details> <h2 id="layout"><a href="#layout" class="header-anchor">#</a> Layout</h2> <blockquote><p>布局容器</p></blockquote> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">class</td> <td style="text-align:left;">容器 class</td> <td style="text-align:left;">string</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">style</td> <td style="text-align:left;">指定样式</td> <td style="text-align:left;">object</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">hasSider</td> <td style="text-align:left;">表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">-</td></tr></tbody></table> <h2 id="layout-sider"><a href="#layout-sider" class="header-anchor">#</a> Layout.Sider</h2> <blockquote><p>侧边栏</p></blockquote> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th> <th style="text-align:left;">版本</th></tr></thead> <tbody><tr><td style="text-align:left;">breakpoint</td> <td style="text-align:left;">触发响应式布局的<a href="https://www.antdv.com/components/grid#API" target="_blank" rel="noopener noreferrer">断点<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td style="text-align:left;">Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }</td> <td style="text-align:left;">-</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">class</td> <td style="text-align:left;">容器 class</td> <td style="text-align:left;">string</td> <td style="text-align:left;">-</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">collapsed(v-model)</td> <td style="text-align:left;">当前收起状态</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">-</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">collapsedWidth</td> <td style="text-align:left;">收缩宽度，设置为 0 会出现特殊 trigger</td> <td style="text-align:left;">number</td> <td style="text-align:left;">80</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">collapsible</td> <td style="text-align:left;">是否可收起</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">defaultCollapsed</td> <td style="text-align:left;">是否默认收起</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">reverseArrow</td> <td style="text-align:left;">翻转折叠提示箭头的方向，当 Sider 在右边时可以使用</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">style</td> <td style="text-align:left;">指定样式</td> <td style="text-align:left;">object|string</td> <td style="text-align:left;">-</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">theme</td> <td style="text-align:left;">主题颜色</td> <td style="text-align:left;">string: <code>light</code> <code>dark</code></td> <td style="text-align:left;"><code>dark</code></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">trigger</td> <td style="text-align:left;">自定义 trigger，设置为 null 时隐藏 trigger</td> <td style="text-align:left;">string|slot</td> <td style="text-align:left;">-</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">width</td> <td style="text-align:left;">宽度</td> <td style="text-align:left;">number|string</td> <td style="text-align:left;">200</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">zeroWidthTriggerStyle</td> <td style="text-align:left;">指定当 <code>collapsedWidth</code> 为 0 时出现的特殊 trigger 的样式</td> <td style="text-align:left;">object</td> <td style="text-align:left;">-</td> <td style="text-align:left;">1.5.0</td></tr></tbody></table> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <table><thead><tr><th style="text-align:left;">事件名称</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">回调参数</th></tr></thead> <tbody><tr><td style="text-align:left;">collapse</td> <td style="text-align:left;">展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发</td> <td style="text-align:left;">(collapsed, type) =&gt; {}</td></tr> <tr><td style="text-align:left;">breakpoint</td> <td style="text-align:left;">触发响应式布局<a href="https://www.antdv.com/components/grid#api" target="_blank" rel="noopener noreferrer">断点<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>时的回调</td> <td style="text-align:left;">(broken) =&gt; {}</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/ant-vue/category/" class="prev router-link-active"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        Grid 栅格布局
      </a></span> <span class="next"><a href="/ant-vue/category/article-2.html">
        Button 按钮
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/ant-vue/assets/js/app.feae463b.js" defer></script><script src="/ant-vue/assets/js/2.3106f7d0.js" defer></script><script src="/ant-vue/assets/js/91.551abb3a.js" defer></script><script src="/ant-vue/assets/js/11.a6f7a3fd.js" defer></script><script src="/ant-vue/assets/js/12.691490ec.js" defer></script><script src="/ant-vue/assets/js/13.1932f397.js" defer></script><script src="/ant-vue/assets/js/10.fcb610d3.js" defer></script>
  </body>
</html>